<template>
	<div class="userSave">
		<div class="userSave_cont">
			<div class="changePhone_items">
				<div style="font-size: 32rpx;">申请回线上</div>
			</div>
			<div class="changePhone_items">
				<div class="invite_cont_time">
					原因类型
				</div>
				<div class="invite_cont_items" @click="showSex = true; hideKeyboard()">
					{{from.hui_type}}
					<!-- 	<u--input v-model="from.hui_type" disabled   disabledColor="#ffffff" placeholder="请选择原因"
						border="none" placeholder-style='color:#666;'></u--input> -->
					<u-icon slot="right" name="arrow-right" color='#6D6D6D'></u-icon>
				</div>
			</div>
			<div class="changePhone_items">
				<div class="changePhone_items_left">
					<div>备注</div> <textarea value="" v-model="content" placeholder="请输入备注" />
				</div>
			</div>
			<div class="changePhone_items">
				<div class="invite_cont_time">
					回线上时间
				</div>
				<div class="invite_cont_items" @click='tiemEvent()'>
					{{hui_time?hui_time:'请选择时间'}}
					<u-icon slot="right" name="arrow-right" color='#6D6D6D'></u-icon>
				</div>
			</div>

		</div>

		<u-calendar :show="show" :mode="mode" @confirm="confirm" @close='show=false'></u-calendar>

		<u-action-sheet :show="showSex" :actions="actions" title="请选择" @close="showSex = false" @select="sexSelect">
		</u-action-sheet>
		<div class="userSaveBtn" @click='saveEvent()'>
			提交申请
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				hui_time: '',
				from: {
					hui_type: "请选择原因"
				},
				SMSCode: '',
				title: '',
				content: '',
				time: '',
				show: false,
				//yy
				showSex: false,
				// ①自身原因 ②家庭原因 ③行政原因 ④运营原因 ⑤环境原因 ⑥其他原因
				actions: [{
						name: '自身原因',
					},
					{
						name: '家庭原因',
					},
					{
						name: '行政原因',
					},
					{
						name: '运营原因',
					},
					{
						name: '环境原因',
					},
					{
						name: '其他原因',
					},
				],
			}
		},
		methods: {
			hideKeyboard() {

			},
			tiemEvent() {
				this.show = !this.show
			},
			confirm(e) {
				console.log(e);
				this.hui_time = e[0]
				this.show = !this.show
			},
			sexSelect(e) {
				console.log("e.name", e.name, )
				var that = this
				that.$set(that.from, 'hui_type', e.name)
			},
			async saveEvent() {
				if (!this.hui_time) return uni.showToast({
					title: "请选择时间",
					mask: true,
					icon: "none",
					duration: 1000
				})
				if (this.from.hui_type == '请选择原因') return uni.showToast({
					title: "请选择原因",
					mask: true,
					icon: "none",
					duration: 1000
				})
				const {
					data
				} = await this.$request(this.$Api.userHui, {
					title: this.title,
					content: this.content,
					hui_time: this.hui_time,
					hui_type: this.from.hui_type
				}, "POST")
				if (data.code !== 0) return
				uni.showToast({
					title: "提交成功",
					mask: true,
					icon: "none",
					duration: 1000
				})
				setTimeout(() => {
					uni.navigateBack()
				}, 800)
			}
		}
	}
</script>

<style lang="less">
	.userSave {
		padding: 24rpx 0;

		.invite_cont_time {
			font-size: 30rpx;
			padding: 26rpx 0 36rpx 0;
		}

		.invite_cont_items {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
			width: 400rpx;
			height: 70rpx;
			// background: #F5F5F5;
			padding: 0 36rpx 0 24rpx;
			box-sizing: border-box;
			color: #666666;
		}

		.changePhone_items {
			width: 750rpx;
			min-height: 100rpx;
			border-bottom: 1rpx solid #C9C9C9;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			box-sizing: border-box;
			background: #fff;

			.changePhone_items_left {
				display: flex;
				font-size: 28rpx;
				line-height: 100rpx;

				div {
					margin-right: 100rpx;
					width: 120rpx;
				}

				input {
					height: 100rpx;
					line-height: 100rpx;
				}

				textarea {
					height: 200rpx;
					width: 500rpx;
					padding: 24rpx 0rpx 20rpx 95rpx;
					box-sizing: border-box;
					color: #666;
					line-height: 35rpx;

				}
			}
		}

		.changePhone_items:last-child {
			border: none;
		}
	}

	.userSaveBtn {
		width: 750rpx;
		height: 100rpx;
		background: #9013FE;
		font-size: 30rpx;
		color: #fff;
		text-align: center;
		line-height: 100rpx;
		position: fixed;
		left: 0;
		bottom: 0;
	}
</style>